<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="right">
				<image style="justify-content: right;width: 64rpx;height: 64rpx;margin-right:30rpx;"
					src="../../../static/cliend/7399.png" mode="aspectFit" @tap="publishWorks">
				</image>
			</block>
		</hx-navbar>
		<mescroll-body ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="{auto: false, bgColor: '#FFFFFF'}" :up="upOption">
			<view class="list">
				<view class="flex opus_"
					style="height: 220rpx;border-bottom: 1rpx solid rgba(30,30,30,0.1);align-items:center"
					v-for="(item,index) in opusDate" :key="index" @click="opusDetails(item.id)">
					<image style="width: 230rpx;height: 174rpx;border-radius: 8rpx;" :src="item.image"
						mode="aspectFill"></image>
					<view style="line-height: 44rpx;width:100%;margin-left: 20rpx;">
						<h4 style="font-size: 32rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							{{item.title}}
						</h4>
						<view class="content" v-html="item.content">
						</view>
						<view class="flex"
							style="font-size: 24rpx;color: rgba(30,30,30,0.5);justify-content: space-between;margin-top: 30rpx;">
							<text>发布时间</text>
							<text>{{item.createTime}}</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; //引入滚动
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				// 标题栏配置
				config: {
					title: "我的作品",
					back: true,
					color: "#111111",
					rightSlot: true,
					backgroundColor: [1, "#FFFFFF"],
				},
				upOption: {
					auto: false,
					empty: {
						tip: '~ 无更多数据 ~'
					},
					textNoMore: '--没有更多了--',
					noMoreSize: 3,
				},
				opusDate: [],

			}
		},
		onLoad() {
			this.articleIist(1, 10)
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			upCallback(e) {
				this.articleIist(e.num, 10)
			},
			articleIist(num, size) {
				let data = {
					pageNo: num,
					pageSize: size,
					type: 2,
				}
				this.$api.articleIist(data).then((res) => {
					res.data.result.list.forEach((item) => {
						item.createTime = this.$tools.fileTime(item.createTime).slice(0, 11)
						console.log('收藏', item.createTime)
					})
					if (num == 1) {
						this.opusDate = res.data.result.list
					} else {
						this.opusDate = this.opusDate.concat(res.data.result.list)
					}
					this.mescroll.endBySize(res.data.result.list.length, res.data.total);
				})
			},
			publishWorks() {
				this.$tools.goPageNoAuth('/clientEnd/page/design/publishWorks')
			},
			// 作品详情页
			opusDetails(id) {
				this.$tools.goPageNoAuth('../decoration/homepageDetails?id=' + id)
			},
		}
	}
</script>

<style scoped>
	.list>.opus_:last-child {
		border-bottom: none !important;
	}

	.content {
		height: 60rpx;
		font-size: 24rpx;
		color: rgba(30, 30, 30, 0.5);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list {
		width: 100%;
		margin-top: 30rpx;
		background-color: #fff;
		padding: 0 30rpx;
	}

	.opus {
		padding: 30rpx;
	}
</style>
